import React from 'react'
import { Link } from 'react-router-dom'
import { Card } from 'antd'
import { store } from '../../store/store'

class PCBewsImageBlock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      news: ''
    }
  }

  componentDidMount() {
    const type = this.props.type
    const count = this.props.count
    store.getNews(type, count)
      .then(news => {
        this.setState({
          news
        })
      })
  }

  render() {
    const { news } = this.state
    const styleImage = {
      display: "block",
      width: this.props.imageWidth,
      height: "90px"
    };
    const styleText = {
      width: this.props.imageWidth,
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis"
    };
    const newsList = news.length
      ? (
        news.map((newsItem, index) => {
          return (
            <div key={index} className='imageblock'>
              <Link to={`/detail/${newsItem.uniquekey}`}>
                <div className='custom-image'>
                  <img src={newsItem.thumbnail_pic_s} style={styleImage} alt='' />
                </div>
                <div className='custom-card'>
                  <h3 style={styleText}>{newsItem.title}</h3>
                  <p style={styleText}>{newsItem.author_name}</p>
                </div>
              </Link>
            </div>
          )
        })
      )
      : (
        <span>没有加载任何消息</span>
      );
    return (
      <div className='pc__container__topNewsList'>
        <Card title={this.props.cardTitle} bordered={true} style={{ width: this.props.width, marginTop: '10px' }}>
          {newsList}
        </Card>
      </div>
    )
  }
}

export default PCBewsImageBlock